<template>
	<scroll-view scroll-y="true" class="auntpage">
		<view class="top">
			<view style="display: flex;align-items: center;">
				<u-icon name="checkmark-circle-fill" color="#1684FC"></u-icon>
				<text>实名认证已通过</text>
			</view>
		</view>
		
		<view class="user">
			<image class="bg" src="@/pagesC/static/images/abg.svg" mode="widthFix"></image>
			<view class="cont">
				<view style="padding: 30rpx;display: flex;align-items: center;justify-content: space-between;">
					<view>
						<view style="font-size: 36rpx;color: #fff;">{{userInfo.name||'--'}}</view>
						<view style="display: flex;margin-top: 20rpx;">
							<u-tag bgColor="#E3FFF3" color="#42B571" size="mini">已认证</u-tag>
							<view style="width: 20rpx;"></view>
							<u-tag bgColor="#D9F6FF" color="#467CFC" size="mini">已入库</u-tag>
						</view>
					</view>
					<u-avatar :src="userInfo.avatar || '' " size="60" mode="aspectFill"></u-avatar>
				</view>
				<view style="font-size: 28rpx;color: #fff;padding: 30rpx;line-height: 1.8;">
					<view><text class="lw">电话</text><text>：{{userInfo.phone||userphone||'--'}}</text></view>
					<view><text class="lw">身份证号</text><text>：{{idCard}}</text></view>
				</view>
			</view>
		</view>
		
		<view style="background: #fff;">
			<u-cell-group :border="false">
				<u-cell title="发证机关" :border="true" :value="userInfo.identityOrg||'--'"></u-cell>
				<u-cell title="有效期限起始" :border="true" :value="((userInfo.issuedTime||'--').split(' ')[0])"></u-cell>
				<u-cell title="有效期限截止" :border="true" :value="((userInfo.expiredTime||'--').split(' ')[0])"></u-cell>
				<u-cell title="政治面貌" :border="true" :value="dictLabel(political, userInfo.politicalStatus)"></u-cell>
				<u-cell title="文化程度" :border="false" :value="dictLabel(eduLevel, userInfo.education)"></u-cell>
			</u-cell-group>
		</view>
	</scroll-view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import {eduLevel, political, dictLabel} from "@/utils/common.js"
import { personInfoList } from '@/api/qss/zxhapi.js'

const userphone = uni.getStorageSync('phone')||''
const idCard = uni.getStorageSync('userInfo')?.idCard||'--'
const userInfo = ref({})

function getCont(phone){
	personInfoList({phone: phone}).then(res=>{
		if(res.rows?.length){
			let token = uni.getStorageSync('token')
			userInfo.value = res.rows[0]
			userInfo.value.avatar = userInfo.value.avatar?userInfo.value.avatar+`?platform=corp&Authorization=Bearer ${token}`:''
		}
	}).finally(()=>{
		uni.hideLoading()
	})
}

onLoad((option)=>{
	userInfo.value = uni.getStorageSync('userInfo')||{}
	let phone = uni.getStorageSync('phone')||''
	if(phone) {
		getCont(phone)
	}
})

</script>

<style lang="less" scoped>
.auntpage{
	height: 100%;
	background: #f8f8f8;
	.top{
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #E5F4FF;
		color: #1684FC;
		font-size: 24rpx;
	}
	.user{
		margin: 30rpx;
		position: relative;
		.bg{
			width: 100%;
			display: block;
		}
		.cont{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 5;
			overflow: hidden;
			.lw{
				width: 124rpx;
				display: inline-block;
				text-align-last: justify;
			}
		}
	}
	::v-deep .u-tag__text--mini{
		line-height: 26px !important;
	}
}
</style>